<template>
    <div>
        <div style="width:600px;height:450px" ref="chart">

        </div>
    </div>
</template>

<script>
export default {
    name:'PersonDis',
    props:['personData','personCount'],
    data(){
        return{
            chart: null,
        }
    },
    mounted(){
        this.$nextTick(() =>{
            this.dataInit()
        })
    },
    beforeDestroy(){
        this.destoryData();
    },
    methods:{
        destoryData(){
            if(!this.chart){
            return
            }
            this.chart.dispose();
            this.chart = null;
        },
        dataInit(){
            const option = {
                title: {
                text: '人员分布情况',
                subtext: "总人数："+this.personCount,
                left: 'center'
                },
                tooltip: {
                trigger: 'item'
                },
                legend: {
                orient: 'vertical',
                left: 'left'
                },
                series: [
                {
                    name: '人员分布',
                    type: 'pie',
                    radius: '50%',
                    data: this.personData,
                    emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                    }
                }
                ]
            }
        this.chart = this.$echarts.init(this.$refs.chart);
        this.chart.setOption(option);
        }
    },
    watch:{
        personData:{
            handler:function(val){
                this.destoryData();
                this.dataInit();
            },
            deep: true
        }
    }
}
</script>

<style>

</style>